<template>
  <div id="app">
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <p>苹果10￥/斤折扣8折</p>
    <p>请输入你要购买的斤数<input type="text" v-model.lazy="jie"></p>
      <p><button @click="jie">结账买单~</button></p>
      <p>结账单：单价：{{total}}￥元 折后价：{{rate}} ￥元 省了：{{omit}}￥元</p>
  </div>
</template>

<script>
export default {
  name:"app",
  data(){
    return {
      jie:'',
    }
  },
  computed:{
    total(){
      return  this.jie *10
    },
    rate(){
      return (this.jie *10 * 0.8)
    },
    omit(){
      return this.total - this.rate
    }
  }
}
</script>

<style>
p{
  text-align: center;
}
</style>